<template>
    <div class="goodsinfo-container">
		<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>
		
        <!-- 图片区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbotuList="lunbotuList" :isfull="false"></swiper>
					</div>
				</div>
        </div>
		<!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">{{goodsmessage.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>市场价:<del>{{goodsmessage.market_price}}</del>&nbsp;&nbsp;销售价:<span class="price">￥{{goodsmessage.sell_price}}</span></p>
						<p>购买数量:<numbox @getcount="getSelectedCount" :max="goodsmessage.stock_quantity"></numbox></p>
						<p>
						 <mt-button type="primary" size="small">立即购买</mt-button>
						<mt-button type="danger" size="small" @click="addCarShop">加入购物车</mt-button>
						</p>
					</div>
				</div>
        </div>
		<!-- 商品参数区域 -->
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{goodsmessage.goods_no}}</p>
						<p>库存情况:{{goodsmessage.stock_quantity}}件</p>
						<p>上架时间:{{goodsmessage.add_time|dateFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<mt-button type="primary" plain size="large" @click="getdesc(id)">图文介绍</mt-button>
						<mt-button type="danger" plain size="large" @click="getcomment(id)">商品评论</mt-button>
						</div>
			</div>
			
    </div>
</template>
<script>
import swiper from '../subcompoments/swiper.vue'
import numbox from '../subcompoments/number-box.vue'
export default {
    data(){
        return{
			id:this.$route.params.id,
			lunbotuList:[],
			goodsmessage:{},//获取商品信息
			ballFlag:false,
			SelectedCount:1//保存用户选中的商品数量,默认为1

		}
	},
	created(){
		this.getlunbotu()
		this.getinfo()
	},
	methods:{
		getlunbotu(){
			this.$http.get('api/getthumimages/'+this.id).then(result=>{
				if(result.body.status==0){
					result.body.message.forEach(item=>{
						item.img=item.src
					})
					this.lunbotuList=result.body.message
				}else{
					Toast('加载失败')
				}
			})
		},
		getinfo(){
			this.$http.get('api/goods/getinfo/'+this.id).then(result=>{
				if(result.body.status==0){
					this.goodsmessage=result.body.message[0];
				}
				else{
					Toast('商品信息加载失败')
				}
			})
		},
		getdesc(id){
			//使用编程式导航实现商品详情页面的跳转
			this.$router.push({name:'desc',params:{id}})
		},
		getcomment(id){
			//使用编程式导航实现评论页面的跳转
			this.$router.push({name:'comment',params:{id}})
		},
		addCarShop(){//加入购物车
			this.ballFlag=!this.ballFlag;
			var goodsinfo={
				id:this.id,
				count:this.SelectedCount,
				price:this.goodsmessage.sell_price,
				selected:true
			};
			this.$store.commit("addToCar",goodsinfo);//调用store中的mutations将商品加入购物车
		},
		beforeEnter(el){
			el.style.transform="translate(0,0)"
		},
		enter(el,done){
			el.offsetWidth
			const ballPosition=this.$refs.ball.getBoundingClientRect();
			const badgePosition=document.getElementById("badge").getBoundingClientRect();
			const xDist=badgePosition.left-ballPosition.left;
			const yDist=badgePosition.top-ballPosition.top;
			el.style.transform=`translate(${xDist}px,${yDist}px)`;
			el.style.transition="all 0.5s cubic-bezier(.4,-0.49,1,.73)";
			done();
			
		},
		afterEnter(el){
			this.ballFlag=!this.ballFlag;
		},
		getSelectedCount(count){
			//子组件把选中的值传递给父组件的时候,把选中的值保存到data中
			this.SelectedCount=count;
			console.log(count)
		}
	},
	components:{
		swiper,
		numbox,

	}
}
</script>
<style lang="scss" scoped>
.goodsinfo-container{
    background-color: #eee;
    overflow: hidden;
}
.price{
	color: red;
}
.mui-card-footer{
	display: block;
	button{
		margin: 15px 0;
	}
}
.ball{
	width: 15px;
	height: 15px;
	background-color: red;
	z-index: 99;
	border-radius: 50%;
	position: absolute;
	top: 389px;
	left:78px;
	
}
</style>
